<template>
  <view class="container">
    <view class="form-header">
      <text class="form-title">设备报修</text>
    </view>
    
    <view class="form-content">
      <!-- 报修类型选择 -->
      <view class="form-item">
        <text class="form-label">报修类型</text>
        <view class="type-selector">
          <view 
            v-for="(type, index) in repairTypes" 
            :key="index"
            class="type-item"
            :class="{ active: formData.type === type.value }"
            @click="selectType(type.value)"
          >
            <image class="type-icon" :src="type.icon"></image>
            <text class="type-name">{{ type.name }}</text>
          </view>
        </view>
      </view>
      
      <!-- 报修位置 -->
      <view class="form-item">
        <text class="form-label">报修位置</text>
        <view class="location-picker" @click="showLocationPicker = true">
          <text class="location-text" v-if="formData.location">{{ formData.location }}</text>
          <text class="placeholder" v-else>请选择报修位置</text>
          <text class="picker-arrow">></text>
        </view>
      </view>
      
      <!-- 报修描述 -->
      <view class="form-item">
        <text class="form-label">问题描述</text>
        <textarea 
          class="description-input" 
          v-model="formData.description" 
          placeholder="请详细描述问题，以便维修人员更好地了解情况"
          maxlength="500"
        ></textarea>
        <text class="word-count">{{ formData.description.length }}/500</text>
      </view>
      
      <!-- 图片上传 -->
      <view class="form-item">
        <text class="form-label">上传图片 (选填，最多3张)</text>
        <view class="upload-container">
          <view 
            class="upload-item" 
            v-for="(image, index) in formData.images" 
            :key="index"
          >
            <image class="upload-image" :src="image" mode="aspectFill"></image>
            <view class="delete-icon" @click="deleteImage(index)">×</view>
          </view>
          <view class="upload-btn" @click="chooseImage" v-if="formData.images.length < 3">
            <text class="upload-icon">+</text>
          </view>
        </view>
      </view>
      
      <!-- 联系方式 -->
      <view class="form-item">
        <text class="form-label">联系人</text>
        <input class="input" v-model="formData.contactName" placeholder="请输入联系人姓名" />
      </view>
      
      <view class="form-item">
        <text class="form-label">联系电话</text>
        <input class="input" v-model="formData.contactPhone" placeholder="请输入联系电话" type="number" maxlength="11" />
      </view>
      
      <!-- 预约时间 -->
      <view class="form-item">
        <text class="form-label">期望上门时间 (选填)</text>
        <view class="time-picker" @click="showTimePicker = true">
          <text class="time-text" v-if="formData.expectedTime">{{ formData.expectedTime }}</text>
          <text class="placeholder" v-else>请选择期望上门时间</text>
          <text class="picker-arrow">></text>
        </view>
      </view>
    </view>
    
    <!-- 提交按钮 -->
    <view class="submit-btn" @click="submitRepair">
      <text>提交报修</text>
    </view>
    
    <!-- 位置选择弹窗 -->
    <uni-popup ref="locationPopup" type="bottom" @change="popupChange">
      <view class="popup-content">
        <view class="popup-header">
          <text class="cancel-btn" @click="showLocationPicker = false">取消</text>
          <text class="popup-title">选择报修位置</text>
          <text class="confirm-btn" @click="confirmLocation">确定</text>
        </view>
        <view class="popup-body">
          <picker-view 
            class="picker-view" 
            :value="locationIndex" 
            @change="onLocationChange"
          >
            <picker-view-column>
              <view class="picker-item" v-for="(item, index) in buildings" :key="index">{{ item }}</view>
            </picker-view-column>
            <picker-view-column>
              <view class="picker-item" v-for="(item, index) in floors" :key="index">{{ item }}</view>
            </picker-view-column>
            <picker-view-column>
              <view class="picker-item" v-for="(item, index) in rooms" :key="index">{{ item }}</view>
            </picker-view-column>
          </picker-view>
        </view>
      </view>
    </uni-popup>
    
    <!-- 时间选择弹窗 -->
    <uni-popup ref="timePopup" type="bottom" @change="popupChange">
      <view class="popup-content">
        <view class="popup-header">
          <text class="cancel-btn" @click="showTimePicker = false">取消</text>
          <text class="popup-title">选择期望上门时间</text>
          <text class="confirm-btn" @click="confirmTime">确定</text>
        </view>
        <view class="popup-body">
          <picker-view 
            class="picker-view" 
            :value="timeIndex" 
            @change="onTimeChange"
          >
            <picker-view-column>
              <view class="picker-item" v-for="(item, index) in dates" :key="index">{{ item }}</view>
            </picker-view-column>
            <picker-view-column>
              <view class="picker-item" v-for="(item, index) in hours" :key="index">{{ item }}</view>
            </picker-view-column>
          </picker-view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        type: '',
        location: '',
        description: '',
        images: [],
        contactName: '',
        contactPhone: '',
        expectedTime: ''
      },
      repairTypes: [
        { name: '水电维修', value: 'plumbing', icon: '/static/icons/水电维修.png' },
        { name: '设备故障', value: 'equipment', icon: '/static/icons/设备故障.png' },
        { name: '公共设施', value: 'public', icon: '/static/icons/公共设施.png' },
        { name: '其他问题', value: 'other', icon: '/static/icons/其他问题.png' }
      ],
      showLocationPicker: false,
      showTimePicker: false,
      locationIndex: [0, 0, 0],
      timeIndex: [0, 0],
      buildings: ['A栋', 'B栋', 'C栋', 'D栋'],
      floors: ['1楼', '2楼', '3楼', '4楼', '5楼'],
      rooms: ['101室', '102室', '103室', '104室', '105室'],
      dates: ['今天', '明天', '后天'],
      hours: ['09:00-10:00', '10:00-11:00', '11:00-12:00', '14:00-15:00', '15:00-16:00', '16:00-17:00']
    }
  },
  onLoad() {
    // 从缓存获取用户信息，填充联系人信息
    const userInfo = uni.getStorageSync('userInfo')
    if (userInfo) {
      this.formData.contactName = userInfo.userName || ''
      this.formData.contactPhone = userInfo.phone || ''
    }
  },
  watch: {
    showLocationPicker(val) {
      if (val) {
        this.$refs.locationPopup.open()
      } else {
        this.$refs.locationPopup.close()
      }
    },
    showTimePicker(val) {
      if (val) {
        this.$refs.timePopup.open()
      } else {
        this.$refs.timePopup.close()
      }
    }
  },
  methods: {
    // 选择报修类型
    selectType(type) {
      this.formData.type = type
    },
    
    // 位置选择器变化
    onLocationChange(e) {
      this.locationIndex = e.detail.value
    },
    
    // 确认位置选择
    confirmLocation() {
      const building = this.buildings[this.locationIndex[0]]
      const floor = this.floors[this.locationIndex[1]]
      const room = this.rooms[this.locationIndex[2]]
      this.formData.location = `${building}${floor}${room}`
      this.showLocationPicker = false
    },
    
    // 时间选择器变化
    onTimeChange(e) {
      this.timeIndex = e.detail.value
    },
    
    // 确认时间选择
    confirmTime() {
      const date = this.dates[this.timeIndex[0]]
      const hour = this.hours[this.timeIndex[1]]
      this.formData.expectedTime = `${date} ${hour}`
      this.showTimePicker = false
    },
    
    // 选择图片
    chooseImage() {
      uni.chooseImage({
        count: 3 - this.formData.images.length,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          this.formData.images = [...this.formData.images, ...res.tempFilePaths]
        }
      })
    },
    
    // 删除图片
    deleteImage(index) {
      this.formData.images.splice(index, 1)
    },
    
    // 弹窗状态变化
    popupChange(e) {
      if (!e.show) {
        this.showLocationPicker = false
        this.showTimePicker = false
      }
    },
    
    // 提交报修
    submitRepair() {
      // 表单验证
      if (!this.formData.type) {
        uni.showToast({
          title: '请选择报修类型',
          icon: 'none'
        })
        return
      }
      
      if (!this.formData.location) {
        uni.showToast({
          title: '请选择报修位置',
          icon: 'none'
        })
        return
      }
      
      if (!this.formData.description) {
        uni.showToast({
          title: '请填写问题描述',
          icon: 'none'
        })
        return
      }
      
      if (!this.formData.contactName) {
        uni.showToast({
          title: '请填写联系人',
          icon: 'none'
        })
        return
      }
      
      if (!this.formData.contactPhone) {
        uni.showToast({
          title: '请填写联系电话',
          icon: 'none'
        })
        return
      }
      
      // 手机号格式验证
      if (!/^1[3-9]\d{9}$/.test(this.formData.contactPhone)) {
        uni.showToast({
          title: '请输入正确的手机号',
          icon: 'none'
        })
        return
      }
      
      // 显示提交中
      uni.showLoading({
        title: '提交中...'
      })
      
      // 模拟API请求
      setTimeout(() => {
        uni.hideLoading()
        uni.showToast({
          title: '报修提交成功',
          icon: 'success'
        })
        
        // 跳转回列表页
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      }, 1500)
    }
  }
}
</script>

<style>
.container {
  padding: 30rpx;
  background-color: #F8F8F8;
  min-height: 100vh;
}

.form-header {
  margin-bottom: 30rpx;
}

.form-title {
  font-size: 36rpx;
  font-weight: bold;
}

.form-content {
  background-color: #FFFFFF;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 40rpx;
}

.form-item {
  margin-bottom: 30rpx;
}

.form-label {
  display: block;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 16rpx;
  font-weight: 500;
}

.type-selector {
  display: flex;
  flex-wrap: wrap;
}

.type-item {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx 0;
  border-radius: 10rpx;
}

.type-item.active {
  background-color: rgba(0, 122, 255, 0.1);
}

.type-icon {
  width: 60rpx;
  height: 60rpx;
  margin-bottom: 10rpx;
}

.type-name {
  font-size: 24rpx;
  color: #333;
}

.location-picker, .time-picker {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80rpx;
  padding: 0 20rpx;
  background-color: #F8F8F8;
  border-radius: 10rpx;
}

.location-text, .time-text {
  font-size: 28rpx;
  color: #333;
}

.placeholder {
  font-size: 28rpx;
  color: #999;
}

.picker-arrow {
  font-size: 28rpx;
  color: #999;
}

.description-input {
  width: 100%;
  height: 200rpx;
  padding: 20rpx;
  background-color: #F8F8F8;
  border-radius: 10rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}

.word-count {
  text-align: right;
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
}

.upload-container {
  display: flex;
  flex-wrap: wrap;
}

.upload-item, .upload-btn {
  width: 180rpx;
  height: 180rpx;
  margin-right: 20rpx;
  margin-bottom: 20rpx;
  border-radius: 10rpx;
  overflow: hidden;
  position: relative;
}

.upload-image {
  width: 100%;
  height: 100%;
}

.delete-icon {
  position: absolute;
  top: 0;
  right: 0;
  width: 40rpx;
  height: 40rpx;
  background-color: rgba(0, 0, 0, 0.5);
  color: #FFFFFF;
  font-size: 30rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.upload-btn {
  background-color: #F8F8F8;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1rpx dashed #CCCCCC;
}

.upload-icon {
  font-size: 60rpx;
  color: #CCCCCC;
}

.input {
  height: 80rpx;
  padding: 0 20rpx;
  background-color: #F8F8F8;
  border-radius: 10rpx;
  font-size: 28rpx;
}

.submit-btn {
  background-color: #007AFF;
  color: #FFFFFF;
  height: 90rpx;
  border-radius: 45rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32rpx;
  font-weight: bold;
  margin-top: 60rpx;
}

.popup-content {
  background-color: #FFFFFF;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  padding-bottom: 40rpx;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #F2F2F2;
}

.popup-title {
  font-size: 32rpx;
  font-weight: bold;
}

.cancel-btn, .confirm-btn {
  font-size: 28rpx;
}

.cancel-btn {
  color: #999;
}

.confirm-btn {
  color: #007AFF;
}

.popup-body {
  padding: 20rpx 0;
}

.picker-view {
  width: 100%;
  height: 400rpx;
}

.picker-item {
  line-height: 80rpx;
  text-align: center;
}
</style> 